<template>
  <div class="capacity-table">
    <el-button type="primary" @click="dialogFormVisibleAddone = true">新建一级能力</el-button>
    <el-button type="primary" @click="changedialogtwo">新建二级能力</el-button>
    <el-button type="primary" :disabled="save" @click="changeSave">保存</el-button>
    <el-button :disabled="save" @click="changeCancel">取消</el-button>
    <el-table :data="tableData" :height="maxheight" @cell-click="cellClick" @header-click="handleHeaderClick" border :span-method="objectSpanMethod"
      resizable width="100%">
      <el-table-column prop="capacityNameOne" label="一级名称">
        <template slot-scope="{ row }">
          <span @click="editOnename(row)">{{ row.capacityNameOne }} <i class="el-icon-edit"></i></span>
        </template>
      </el-table-column>
      <el-table-column prop="capacityNameTwo" label="二级名称" width="300">
        <template slot-scope="{ row }">
          <span v-if="row.capacityNameTwo" @click="editTwoname(row)">{{ row.capacityNameTwo }} <i
              class="el-icon-edit"></i></span>
          <span v-else style="color: rgba(234, 13, 13, 0.4)" @click="AddTwoName(row)">请添加二级能力 <i
              class="el-icon-edit"></i></span>
          <span><i style="margin: auto" class="el-icon-delete plan-del" @click="changeDeleteTwo(row)"></i></span>
        </template>
      </el-table-column>
      <el-table-column label="平台">
        <template v-for="(item, index) in platformList">
          <el-table-column :prop="item" :label="item" :key="index">
            <template slot-scope="{ row }">
              <i class="el-icon-check" v-if="row.relatedTypes.indexOf(item) != -1"></i>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="dialogFormVisibleone" width="30%">
      <el-form :model="formOne" label-position="left" label-width="120px" ref="formOne">
        <el-form-item label="一级能力名称" prop="name" :rules="[
          {
            required: true,
            message: '请输入名称',
            trigger: 'change',
          },
        ]">
          <el-input v-model="formOne.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisibleone = false">取 消</el-button>
        <el-button type="primary" @click="changeEditOne">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogFormVisibleTwo" width="432" ref="formTwo">
      <el-form :model="formTwo" label-position="left" label-width="120px">
        <el-form-item label="二级能力名称" prop="name" :rules="[
          {
            required: true,
            message: '请输入名称',
            trigger: 'change',
          },
        ]">
          <el-input v-model="formTwo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动性质" prop="relatedType">
          <el-checkbox-group v-model="formTwo.relatedType">
            <template v-for="(item, index) in platformList">
              <el-checkbox :label="item" name="type" style="width: 180px">{{ item }}</el-checkbox>
            </template>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
        <el-button type="primary" @click="changeEditTwo">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增一级能力" :visible.sync="dialogFormVisibleAddone" width="30%">
      <el-form :model="formAddOne" label-position="left" label-width="120px" ref="formAddOne">
        <el-form-item label="一级能力名称" prop="capacityName" :rules="[
          {
            required: true,
            message: '请输入名称',
            trigger: 'change',
          },
        ]">
          <el-input v-model="formAddOne.capacityName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisibleAddone = false">取 消</el-button>
        <el-button type="primary" @click="changeAddOne">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增二级能力" :visible.sync="dialogFormVisibleAddTwo" width="432" ref="formAddTwo">
      <el-form :model="formAddTwo" label-position="left" label-width="120px" ref="formAddTwo">
        <el-form-item label="一级能力名称" prop="pid" :rules="[
          {
            required: true,
            message: '请选择一级能力名称',
            trigger: 'change',
          },
        ]">
          <el-select v-model="formAddTwo.pid" placeholder="请选择一级能力名称">
            <template v-for="(item, index) in option">
              <el-option :key="index" :label="item.label" :value="item.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="二级能力名称" prop="capacityName" :rules="[
          {
            required: true,
            message: '请输入名称',
            trigger: 'change',
          },
        ]">
          <el-input v-model="formAddTwo.capacityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="装备" prop="relatedType">
          <el-checkbox-group v-model="formAddTwo.relatedType">
            <el-checkbox-group v-model="formAddTwo.relatedType">
              <template v-for="(item, index) in platformList">
                <el-checkbox :label="item" name="type" style="width: 180px">{{ item }}</el-checkbox>
              </template>
            </el-checkbox-group>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisibleAddTwo = false">取 消</el-button>
        <el-button type="primary" @click="changeAddTwo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCapacityList,
  editCapacityLevel,
  saveCapacityLevel,
  getCapacityNameList,
  editCapacitySave,
  getTableColumnList,
  delCapacity
} from "../../../api/capacity";
export default {
  props: {
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      maxheight: "calc(100vh - 250px)",
      tableData: [],
      list: ["ALLEGATION", "PLATFORM", "SENSOR", "WEAPON", "CHAIN"],
      editNameOne: true,
      editNameTwo: true,
      dialogFormVisibleone: false,
      dialogFormVisibleTwo: false,
      dialogFormVisibleAddone: false,
      dialogFormVisibleAddTwo: false,
      platformList: [],
      formOne: {
        name: "",
        id: "",
      },
      formTwo: {
        name: "",
        id: "",
        pid: "",
        relatedType: [],
      },
      formAddOne: {
        capacityName: "",
        capacityType: "",
      },
      formAddTwo: {
        capacityType: "",
        capacityName: "",
        relatedType: [],
        pid: "",
      },
      option: [],
      save: true,
    };
  },
  mounted() {
    this.getTableColumnData();
    this.getData();
  },
  methods: {
    cellClick(row, column) {
      if (
        column.property != "capacityNameOne" &&
        column.property != "capacityNameTwo"
      ) {
        this.save = false;
        let index = row.relatedTypes.indexOf(column.property);
        if (index == -1) {
          row.relatedTypes.push(column.property);
        } else {
          row.relatedTypes.splice(index, 1);
        }
      }
    },
    handleHeaderClick(e){
      this.tableData.forEach((item,index) => {
        let idx = item.relatedTypes.indexOf(e.property);
        if(idx == -1){
          item.relatedTypes.push(e.property);
        }
      });
      this.save = false;
    },
    changeSave() {
      const a = [];
      this.tableData.forEach((item) => {
        a.push({
          id: item.capacityTwoId,
          types: item.relatedTypes
        });
      });

      this.$confirm("请确认是否保存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          editCapacitySave({
            dtos: a,
          })
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                this.$message.success(msg);
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => { });
    },
    changeCancel() {
      this.getData();
    },
    getTableColumnData() {
      getTableColumnList()
        .then((res) => {
          const { data } = res?.data;
          this.platformList = data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getData() {
      getCapacityList({ type: this.type })
        .then((res) => {
          const { data } = res?.data;
          this.save = true;
          this.dataProcess(data);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    dataProcess(data) {
      this.tableData = [];
      if (data && data.length) {
        data.forEach((element) => {
          if (element.children && element.children.length) {
            element.children.forEach((item) => {
              this.tableData.push({
                capacityNameOne: element.capacityName,
                capacityOneId: element.capacityId,
                capacityNameTwo: item.capacityName,
                capacityTwoId: item.capacityId,
                pid: item.pid,
                relatedTypes: item.relatedTypes,
              });
            });
          } else {
            this.tableData.push({
              capacityNameOne: element.capacityName,
              capacityOneId: element.capacityId,
              capacityNameTwo: "",
              capacityTwoId: "",
              relatedTypes: [],
            });
          }
        });
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // column.property是表头的key
        let spanArr = this.getSpanArr(this.tableData, "capacityNameOne");
        const _row = spanArr[rowIndex];
        return {
          rowspan: _row,
          colspan: 1,
        };
      }
    },
    getSpanArr(data, index) {
      let spanArr = [];
      let pos = "";
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][index] === data[i - 1][index]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },
    editOnename(row) {
      this.formOne.id = row.capacityOneId;
      this.formOne.name = row.capacityNameOne;
      this.dialogFormVisibleone = true;
    },
    changeEditOne() {
      this.$refs.formOne.validate((val) => {
        if (val) {
          const data = {
            capacityId: this.formOne.id,
            capacityName: this.formOne.name,
          };
          editCapacityLevel(data)
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                this.$message.success(msg);
                this.dialogFormVisibleone = false;
                this.getData();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    editTwoname(row) {
      this.formTwo = {
        id: row.capacityTwoId,
        name: row.capacityNameTwo,
        pid: row.pid,
        relatedType: row.relatedTypes,
      };
      this.dialogFormVisibleTwo = true;
    },
    changeEditTwo() {
      const a = {
        capacityId: this.formTwo.id,
        pid: this.formTwo.pid,
        capacityName: this.formTwo.name,
        relatedTypes: this.formTwo.relatedType,
      };
      editCapacityLevel(a)
        .then((res) => {
          const { code, msg } = res?.data;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogFormVisibleTwo = false;
            this.getData();
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    changeAddOne() {
      this.$refs.formAddOne.validate((val) => {
        if (val) {
          this.formAddOne.capacityType = this.type;
          saveCapacityLevel(this.formAddOne)
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                this.$message.success(msg);
                this.dialogFormVisibleAddone = false;
                this.getData();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    changeAddTwo() {
      this.$refs.formAddTwo.validate((val) => {
        if (val) {
          debugger
          const a = {
            capacityType: this.type,
            pid: this.formAddTwo.pid,
            capacityName: this.formAddTwo.capacityName,
            relatedTypes: this.formAddTwo.relatedType,
          };
          saveCapacityLevel(a)
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                this.$message.success(msg);
                this.dialogFormVisibleAddTwo = false;
                this.getData();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    AddTwoName(row) {
      this.getDataName();
      this.formAddTwo.pid = row.capacityOneId;
      this.dialogFormVisibleAddTwo = true;
    },
    changeDeleteTwo(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delCapacity({ capacityId: row.capacityTwoId })
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                debugger
                this.$message.success(msg);
                this.getData();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => { });

    },
    changedialogtwo() {
      this.dialogFormVisibleAddTwo = true;
      this.getDataName();
    },
    getDataName() {
      this.option = [];
      getCapacityNameList({ type: this.type })
        .then((res) => {
          const { code, data } = res?.data;
          if (code == 200) {
            data.forEach((item) => {
              this.option.push({
                label: item.capacityName,
                value: item.capacityId,
              });
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.capacity-table {
  width: calc(100vw - 440px);
  height: 100%;

  table {
    flex: 1;
    background: #fff;
  }

  .detail {
    width: 40%;
    padding-left: 16px;
    margin-left: 24px;
    height: calc(100vh - 300px);
    border-left: 1px solid #dcdfe6;
  }

  .detail-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .equip-name {
    display: flex;

    .equip {
      margin-right: 24px;
      margin-bottom: 8px;
    }
  }

  :deep(.el-select) {
    width: 100%;
  }
}
</style>
<style lang="scss">
.capacity-table {
  .cell {
    text-align: center;
  }
}
</style>
